<template>
	<view >
		<view class="cart-input">
			<input class="ser-input" @click="search" v-model="value" type="text" value="niha" placeholder="请输入搜索关键词" disabled /> 
	     <u-scroll-list>
	            <view v-for="(item,index) in active" :key="index" @click="acticaty(item,index)">
	                <image :class="nav==index?'caty-gin':'caty-imcage'" :src="item.img"></image>
					<text :class="nav==index?'caty-tyuse':'caty-test'">{{item.name}}</text>
	            </view>
	        </u-scroll-list>
			</view>
		  <view>
				<text style="margin-left: 30rpx; font-weight: 700;font-size: 32rpx; margin-top: 24rpx;">{{q.categories[0].desc}}</text>	 
			</view>
			
			<view>
			<!-- 空白页 --> 
		<view class="empty" v-if="list.length == 0">
			<image src="https://xn-panda-test.oss-cn-hangzhou.aliyuncs.com/xiaochnegxu/cltynull.png" mode="aspectFit"></image>
			<view class="empty-tips">
				这里什么都没有哦~~
			</view>
		</view>
		<!-- 商品列表 -->
		<view class="cate-liket">
			 <grid-view type="masonry" :cross-axis-count="2" :main-axis-gap="15" :cross-axis-gap="15" style="width: 100%;">
			<view class="cate-rietyon" v-for="(item,index) in list" :key="index">
				<image class="cate-comig" :src="item.mainImages[0]" mode="" @click="sanpot(item)"></image>
				<span class="cate-conspan">{{item.title}}</span>
				<view> 
					<span class="caty-ide">￥{{item.minCostPrice}}</span>
					<div class=""></div>
					<!-- <van-icon class="caty-opint" size="18" name="shopping-cart-o" color="#fff"  @click="gouwu(item)"/> -->
					<image class="caty-opint" src="@/static/temp/gouwuc.png" @click="gouwu(item)"></image>
					<van-icon class="caty-vant" size="21" color="#8a8a8a" name="star-o" v-if="list[index].favorites == false" @click="onClickcollect(item)"/>
					<van-icon class="caty-vant" size="21" color="#ff7144" name="star" v-else @click="cancelollect(item)"/>
					
				</view>   
				<view class="caty-act"> 
					{{item.holdUserName}}
					<van-icon class="caty-opitu" name="arrow"/>
				</view>
			
			</view>
			</grid-view>
			<!-- 弹出框 -->
			<u-popup :show="show" mode="bottom" :duration="200" :closeable="true" :overlayOpacity="0.3" @close="close" @open="open">
			    <addition @onchange="onchange" :childata="childata"></addition>
			 </u-popup>
			<!-- 购物车 -->
				<!-- <image class="caty-houwu" src="@/static/gouwu.png" @click="shopping"></image> -->
				<van-icon class="caty-houwu" name="shopping-cart-o" @click="shopping" size="24px" :info="act" color="#ff7144"/>
		</view>
			</view>
		 <van-loading id="demo" class="actoue" v-show="siopen" size="21px" type="spinner">加载中...</van-loading>
		 
	</view>     
</template>
<script>      
import Api from '@/http/api.js'
import roles from '@/http/roles.js'
import addition from '@/pages/commodity/components/addition.vue'
	export default{
		components:{ addition },
		data(){
			return{
				value:'',
				siopen:false,
				show:false,
				city:{},
				chateh:'',
				z:{
					index:1,
					size:100
				},
				act:'',
			q:{
				index:1,
				size:10,
				searchText:'',
				region:{
					province:'',
					city:'',
					county:''
				},
				categories:[
					{
						id:'',
						desc:'',
						level:1
					}
				],
			}, 
			x:{
				commodityId:'',
				specId:'',
				initSpecNumber:1
			},
			list:[],
			info:{
				commodityId:'',  
				specId:'',
				specName:'',
				specPrice:'',
				specNumber:''
			},
			active:[],
			nav:'',
			childata:{}
			} 
		}, 
		onLoad(){
			this.loacalsslist()
			this.logac()
          },
		// 下拉刷新
		onPullDownRefresh(){
			this.loached(); 
		},
		//加载更多
		onReachBottom(){
		const that = this;
		this.siopen = true
		this.q.size = this.q.size+10
		setTimeout(async ()=>{
				
		let rec = await Api.merchandise(this.q)
		this.list = rec.data.data
		 that.siopen = false
		},1000)
		},
		methods:{
			// 获取分类列表
			async loacalsslist(){
				const rrs = await roles.xclassify()
				rrs.data.forEach((item,index)=>{
					if(item.parentId == 'c4'){
						this.active.push(item)
					}
				})
			      for(let i = 0;i<this.active.length;i++){
					  let j = JSON.parse(this.active[i].iconUrl)
					  this.active[i]["img"] = j[0].url
				  }
				  this.q.categories[0].id = this.active[0].id
				  this.q.categories[0].desc = this.active[0].name
				  this.loached()
			},
			async loached(){
			      this.chateh = wx.getStorageSync('chateh')
			      this.city = wx.getStorageSync('city')
				  if(this.city != ''){
					  this.q.region = this.city
				  } else{
					  this.q.region = this.chateh
				  }
				const res = await Api.merchandise(this.q)
				this.list = res.data.data
			},
			
			// 购物车列表
			async logac(){
				let arr = []
				const ret = await Api.trolley(this.z)
				for(let i = 0; i < ret.data.length; i++){
					arr.push(ret.data[i].commodities.length)
				}
				let sum = 0
				arr.forEach(item =>{  
				   sum = sum + item
				})
					this.act = sum
					
			},
			
			// 搜索商品
			search(){
				let actide = JSON.stringify(this.q.categories)
				uni.navigateTo({
					url:'/package/commodity/searchbox?classify='+ actide
				}) 
			},
			// 跳转购物车
			shopping(){
				uni.navigateTo({
					url:'/pages/cart/cart'
				})
			},
		   // 跳转商品详情
		   sanpot(item){
			   uni.navigateTo({
			   	url: `/pages/cart/loginest?id=`+item.commodityId,
			   })
		   },
			// 加入购物车
			async gouwu(item){
				console.log(item) 
				if(item.specs.length == 1){
				this.x.commodityId = item.commodityId
				this.x.specId = item.specs[0].commoditySpecId
				const res = await Api.addshopping(this.x)   
					if(res.code == 200){
						this.$api.msg('商品已添加至购物车');
					} else{
						this.$api.msg('添加失败请重新添加');
					}
			   } else {  
				   this.childata = item
				    this.show = true 
			   }
				this.logac()
			},
			// 关闭弹窗
			close(){   
				this.show = false
			},
            async open(){
				  this.show = true
			 },
			 onchange(){
				this.show = false 
			 },
			// 收藏
			async onClickcollect(item){
			    this.info.commodityId = item.commodityId
			    this.info.specId = item.specs[0].commoditySpecId
				this.info.specName = item.specs[0].name
				this.info.specPrice = item.specs[0].platformPrice
				const res = await Api.collection(this.info)
				this.loached();
			
			 },
			 // 取消收藏
			 async cancelollect(item){
				 const rect = await Api.canceltion({specId:item.specs[0].commoditySpecId,commodityId:item.commodityId})
				 this.loached();
			 },
			 // 切换分类
			 acticaty(item,index){
				 this.nav = index
				 this.q.categories[0].id = item.id
				 this.q.categories[0].desc = item.name
				 this.loached();
			 }
		}
	}
</script>

<style lang="scss">
	// 商品列表
	.cate-liket{
		background-color:#f5f5f5;
		margin-top: 35rpx;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		padding: 0 32upx;
		.cate-rietyon{
			width: 48%;
			height: auto;
			background-color: #FFFFFF;
			margin-bottom: 45upx;
			border-radius: 20rpx !important;
			padding-bottom: 10rpx;
		
		}
		.cate-comig{
			width: 100%;
			height: 350upx;
			border-top-left-radius:20rpx;
			border-top-right-radius:20rpx;
		}
		.caty-ide{
			color: #ff7144;
			margin-left: 20rpx;
			margin-bottom: 10rpx;
		}
		.cate-conspan{
			display: -webkit-box;
		
		    color: #1d1d1d;
			font-size: 24rpx;
			margin-left: 20rpx;
			margin-right: 20rpx;
			margin-bottom: 10rpx;
			line-height: 28rpx;
			font-weight: 500;
			overflow:hidden;
			-webkit-line-clamp: 2; /* 能够显示的最大行数 */
		    -webkit-box-orient: vertical; 
		}
		.cate-image{
			height: 45rpx;
			width: 45rpx;
			border-radius: 50%;
		    margin-left: 20rpx;
		}
		.caty-opint{
			float: right;
			width: 45upx;
			height: 45upx;
			margin-right: 20upx;
		}
		.caty-vant{
			background-color: #f7f7f7;
		    float: right;
			width: 45upx;
			height: 45upx;
			border-radius: 50%;
			margin-right: 25upx;
		}
		.caty-act{
			background-color:#f7f7f7; 
			height:30upx;
			font-size: 24upx;
			margin: 20upx;
			padding-left: 10upx;
			padding-right: 15upx;
			border-radius: 15upx;
		}
		.caty-opitu{
			float: right;
			transform: translateY(30%);
		}
		}
		.caty-houwu{
			position: fixed;
			right: 22rpx;
			bottom: 80rpx;
			width: 75upx;
			height: 75upx;
			background-color: #FFFFFF;
			border-radius: 50%;
		}
		// 加载
		.actoue{
			margin-left: 40%;
		}
         .cart-input{
			 background: linear-gradient(180deg, #FECBA7 0%, rgba(255,243,235,0) 100%);
			 padding-top: 20rpx !important;
		 }
		 .u-search__content__input{
			 background-color: #fcf8f5 !important;
		 }
		 .u-search__action{
			 display: none;
		 }
		 .u-scroll-list{
			 
		 }
		 .caty-imcage{
			 width: 110rpx;
			 height: 110rpx;
			 margin-left: 40rpx;
			 border-radius: 20upx;
			 margin-top: 30rpx;
		 }
		 .caty-gin{
			 width: 110rpx;
			 height: 110rpx;
			 margin-left: 40rpx;
			 border-radius: 20upx;
			 margin-top: 30rpx;
			 border: 2px solid #ff7144;
		 }
		 .caty-test{
			 display: inline-block; 
			margin-left: 50rpx;
			  color: #1d1d1d;
			  font-size: 24rpx;
			  font-weight: 500;
			  width: 70%;
		 }
		 .caty-tyuse{
		 	display: inline-block;
		 	margin-left: 50rpx;
		 	color: #1d1d1d;
		 	font-size: 24rpx;
		 	font-weight: 700;
			width: 70%;
		 }
		 .u-scroll-list__indicator{
			 display: none !important;
		 }
			.ser-input{
					flex:1;
					height: 56upx;
					line-height: 56upx;
					width: 90%;
					margin-left: 30rpx;
					text-align: center;
					font-size: 28upx;
					color:$font-color-base;
					border-radius: 20px;
					background: rgba(255,255,255,.6);
			}
			// 弹出框
			.u-transition{
				height: 55% !important;
			}
			
			// 空白页
				.empty{
						
					overflow: none;
				
					width: 100%;
					height: 100vh;
					padding-bottom:100upx;
					display:flex;
					justify-content: center;
					flex-direction: column;
					align-items:center;
					background: #fff;
					image{
						width: 240upx;
						height: 160upx;
						margin-bottom:30upx;
					}
					.empty-tips{
						display:flex;
						font-size: $font-sm+2upx;
						color: $font-color-disabled;
						.navigator{
							color: $uni-color-primary;
							margin-left: 16upx;
						}
						}
						}
						
</style>